<template>
  <Modal
    :value="visible"
    title="照片"
    width="600"
    @on-visible-change="setVisibility">
    <Row :gutter="20" v-viewer="{movable: false, scalable: false}">
      <template v-if="!isSinglePhoto">
        <i-col span="8" class="c-image-viewer" v-for="id in imgId" :key="id">
          <div class="c-image-viewer__item__wrap">
            <img v-if="isName" class="c-image-viewer__item"  :src="'/v3/file/0?name' + id ">
            <img v-else class="c-image-viewer__item"  :src="'/v3/file/' + id ">
          </div>
        </i-col>
      </template>
      <i-col v-else span="24" class="c-image-viewer is-large">
        <div class="c-image-viewer__item__wrap">
          <img v-if="isName" class="c-image-viewer__item"  :src="'/v3/file/0?name=' + imgId ">
          <img v-else class="c-image-viewer__item"  :src="'/v3/file/' + imgId ">
        </div>
      </i-col>
    </Row>
    <div slot="footer"></div>
  </Modal>
</template>

<script>
    export default {
      name: 'img-viewer',
      props: {
        isName: Boolean,
        imgId: {
          required: true,
          type: [ Array, Number, String ]
        },
        visible: {
          required: true,
          type: Boolean
        }
      },
      computed: {
        isSinglePhoto () {
          return !Array.isArray(this.imgId)
        }
      },
      methods: {
        setVisibility (val) {
          this.$emit('update:visible', val)
        }
      }
    }
</script>

<style scoped>
    .c-image-viewer{
        position: relative;
        height: 200px;
        background-color: snow;
    }

    .is-large{
        height: 500px;
    }

    .c-image-viewer__item__wrap{
        position: relative;
        width: 100%;
        height: 100%;
    }

    .c-image-viewer__item{
        position: absolute;
        max-width: 100%;
        max-height: 100%;
        left: 50%;
        top: 50%;
        cursor: pointer;
        transform: translate(-50%, -50%);
    }
</style>
